import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Dimensions, Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

const MAX_WIDTH = 480;
const screenWidth = Dimensions.get('window').width;
const contentWidth = screenWidth > MAX_WIDTH ? MAX_WIDTH : screenWidth;

const FAQDetailModal = ({ faqItem, onClose }) => {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>问题详情</Text>
        <TouchableOpacity style={styles.closeButton} onPress={onClose}>
          <Ionicons name="close" size={24} color="#666" />
        </TouchableOpacity>
      </View>
      
      <ScrollView style={styles.content}>
        <View style={styles.contentInner}>
          <Text style={styles.questionTitle}>{faqItem.question}</Text>
          <View style={styles.answerContainer}>
            <Text style={styles.answerText}>{faqItem.answer}</Text>
          </View>
          
          {/* 相关问题推荐 */}
          <View style={styles.relatedContainer}>
            <Text style={styles.relatedTitle}>相关问题</Text>
            <TouchableOpacity style={styles.relatedItem}>
              <Ionicons name="help-circle-outline" size={16} color="#999" style={styles.relatedIcon} />
              <Text style={styles.relatedText}>如何修改我的账号密码？</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.relatedItem}>
              <Ionicons name="help-circle-outline" size={16} color="#999" style={styles.relatedIcon} />
              <Text style={styles.relatedText}>账号被盗如何处理？</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
      
      <TouchableOpacity style={styles.contactButton}>
        <Ionicons name="chatbubble-ellipses" size={20} color="#fff" />
        <Text style={styles.contactButtonText}>联系客服</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: Platform.OS === 'ios' ? 88 : 56,
    paddingTop: Platform.OS === 'ios' ? 44 : 0,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    position: 'relative',
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '500',
    color: '#333',
  },
  closeButton: {
    position: 'absolute',
    right: 15,
    bottom: 12,
  },
  content: {
    flex: 1,
  },
  contentInner: {
    padding: 15,
    width: contentWidth,
    alignSelf: 'center',
  },
  questionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
    marginBottom: 15,
  },
  answerContainer: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 15,
    marginBottom: 20,
  },
  answerText: {
    fontSize: 15,
    lineHeight: 22,
    color: '#333',
  },
  relatedContainer: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 15,
    marginBottom: 80, // 为底部按钮留出空间
  },
  relatedTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
    marginBottom: 10,
  },
  relatedItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  relatedIcon: {
    marginRight: 8,
  },
  relatedText: {
    fontSize: 14,
    color: '#666',
  },
  contactButton: {
    position: 'absolute',
    bottom: 20,
    left: '50%',
    transform: [{ translateX: -80 }],
    backgroundColor: '#d0021b',
    borderRadius: 20,
    paddingVertical: 10,
    paddingHorizontal: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: 160,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  contactButtonText: {
    fontSize: 14,
    color: '#fff',
    marginLeft: 5,
    fontWeight: '500',
  },
});

export default FAQDetailModal;